<template>
	<div class="container-wrap">
		<description logo="iconfont icon-jiedian" :title="title" :desc="desc" />
		<el-card class="table-wrap" shadow="never">
			<div class="operation mb15">
				<span>
					<el-input clearable v-model="searchInput" placeholder="请输入节点名称" class="width-150 mr10" @keyup.enter="search"></el-input>
					<el-select v-model="nodeStatusinput" class="width-150 mr10" placeholder="请输入节点状态">
						<el-option
							v-for="item in nodeStatusOptions"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						/>
					</el-select>
					<el-button type="primary" @click="search">搜索</el-button>
				</span>
				<span>
					<el-button type="primary" :disabled="!state.nodeTable.currentRow" @click="openDiskManage">磁盘管理</el-button>
					<el-button type="primary" @click="search">刷新</el-button>
				</span>
			</div>
			<el-table
				ref="tableRef"
				border
				v-loading="state.nodeTable.loading"
				element-loading-text="数据加载中..."
				:data="state.nodeTable.data"
				highlight-current-row
				:row-key="(row:any)=>row.nodeIp"
				height="calc(100vh - 455px)"
				@current-change="handleSelect"
			>
				<el-table-column prop="nodeName" label="名称" min-width="130" show-overflow-tooltip />
				<el-table-column prop="nodeIp" label="IP地址" min-width="130" show-overflow-tooltip />
				<el-table-column prop="nodeStatus" label="节点状态" min-width="100" show-overflow-tooltip>
					<template #default="{row}">
						<el-tag :type="nodeStatusOptions.find(item=>item.value===row.nodeStatus)?.type">
							{{ nodeStatusOptions.find(item=>item.value===row.nodeStatus)?.label }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="nodeUsedDevice" label="已用磁盘数" min-width="100" show-overflow-tooltip />
				<el-table-column prop="nodeAllDevice" label="总磁盘数" min-width="100" show-overflow-tooltip />
			</el-table>

			<el-pagination
				v-model:current-page="state.nodeTable.params.pageNum"
				v-model:page-size="state.nodeTable.params.pageSize"
				@current-change="onHandleCurrentChange"
				@size-change="onHandleSizeChange"
				class="mt15"
				:pager-count="5"
				:page-sizes="[10, 20, 30, 50]"
				background
				layout="total, sizes, prev, pager, next, jumper"
				:total="state.nodeTable.total"
			>
			</el-pagination>
		</el-card>

		<!-- Disk management pop-up window -->
		<el-dialog
			v-model="diskManageVisible"
			destroy-on-close
			:close-on-click-modal="false"
			:title="'节点磁盘管理：'+state.nodeTable.currentRow?.nodeName"
			width="80%"
		>
			<disk-manage :currentRow="state.nodeTable.currentRow"></disk-manage>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="diskManageVisible = false">关闭</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { defineAsyncComponent, getCurrentInstance, onUnmounted, reactive, ref } from 'vue';
import { useNodeApi } from '/@/api/node';
import { NodeDiskData } from '/@/types';

export interface NodeDataRow{
	nodeId:number;
	nodeIp:string;
	nodeName:string;
	nodeStatus:number;
	nodeUsedDevice:number;
	nodeAllDevice:number;
	version:string;
	devices:NodeDiskData[]
}
interface NodeTableState{
	nodeTable:{
		loading:boolean;
		data:NodeDataRow[];
		params:{
			nodeName:string;
			nodeStatus:number|undefined;
			pageNum:number,
			pageSize:number,
		};
		currentRow:NodeDataRow|undefined;
		total:number
	};
}

const description = defineAsyncComponent(() => import('/@/components/description/index.vue'));
const DiskManage = defineAsyncComponent(() => import('./components/diskManage.vue'));

const nodeApi = useNodeApi();
const title = '节点池';
const desc = '节点池包含了分布式存储系统所管理的节点的信息';
/* Node table */
const state = reactive<NodeTableState>({
	nodeTable: {
		loading: false,
		data: [],
		params: {
			nodeName: '',
			nodeStatus: undefined,
			pageNum: 1,
			pageSize: 10
		},
		currentRow: undefined,
		total: 0
	}
});
const nodeStatusOptions = [
	{ label: '未知', value: undefined },
	{ label: '离线', value: 0, type: 'danger' },
	{ label: '在线', value: 1, type: 'success' },
];
const tableRef = ref();
const searchInput = ref('');
const nodeStatusinput = ref(undefined);

// node list
const nodeList = (refresh:boolean = false) => {
	// Display loading
	refresh && (state.nodeTable.loading = true);
	nodeApi.nodeList({
		pageNo: state.nodeTable.params.pageNum,
		pageSize: state.nodeTable.params.pageSize,
		nodeStatus: state.nodeTable.params.nodeStatus,
		nodeName: state.nodeTable.params.nodeName === '' ? undefined : state.nodeTable.params.nodeName
	}).then((res:any) => {
		state.nodeTable.data = res.data.records;
		state.nodeTable.total = res.data.total;
	}).catch(() => {
		state.nodeTable.data = [];
	}).finally(() => {
		state.nodeTable.loading = false;
	});
};
nodeList(true);

const search = () => {
	state.nodeTable.params.nodeName = searchInput.value;
	state.nodeTable.params.nodeStatus = nodeStatusinput.value;
	nodeList(true);
};

// Table single selection
const handleSelect = (data:NodeDataRow) => {
	state.nodeTable.currentRow = data;
};

const onHandleCurrentChange = () => {
	nodeList(true);
};

const onHandleSizeChange = () => {
	nodeList(true);
};

/* Disk manage */
const diskManageVisible = ref(false);
// Open disk management pop-up window
const openDiskManage = () => {
	diskManageVisible.value = true;
};

// ws refresh list
const { proxy } = <any>getCurrentInstance();
proxy.mittBus.on('refresh-list', () => {
	nodeList();
});
onUnmounted(() => {
	proxy.mittBus.off('refresh-list');
});
</script>
<style lang="scss" scoped>
</style>